<template>
	<view class="page-mine">
		<MxUserInfo :detail="userInfo" @login="onLogin" />
		<MxUserMenuBlock class="cmp-user-menu-block" title="会员信息">
			<view class="member-menus">
				<MxMenuBtn class="cmp-menu-btn" v-for="menu in memberMenus" :icon="menu.icon" :name="menu.name"
					:webUrl="menu.isWeb" :href="menu.href" />
			</view>
		</MxUserMenuBlock>

<!-- 		<MxUserMenuBlock v-if="isCoach" class="cmp-user-menu-block" title="教练信息">
			<view class="member-menus">
				<MxMenuBtn class="cmp-menu-btn" v-for="menu in coachMenus" :icon="menu.icon" :name="menu.name"
					:href="menu.href" />
			</view>
		</MxUserMenuBlock> -->
		<hans-tabbar :list="tabBarList" style="position:fixed;bottom:0;width:100%;left:0;right:0;"
			@tabChange="tabChange" :current="tabCurrent" />
	</view>
</template>

<script>
	import {
		imgUrl
	} from '@/utils/config'
	import {
		isWechat,
		getCurrRoute
	} from '@/utils/util'
	import {
		checkLogin
	} from '@/utils/app'
	import MxUserInfo from '@/components/mine/MxUserInfo.vue';
	import MxUserMenuBlock from '@/components/mine/MxUserMenuBlock.vue';
	import MxMenuBtn from '@/components/mine/MxMenuBtn.vue';
	import * as UserApi from '@/api/user'
	import baseMixin from '@/common/mixins/base.js'
	import {
		getMeixingUrl
	} from '@/utils/util.js'
	import HansTabbar from '@/components/common/hans-tabbar/hans-tabbar.vue'

	export default {
		mixins: [baseMixin],
		components: {
			MxUserInfo,
			MxUserMenuBlock,
			MxMenuBtn,
			HansTabbar
		},
		data() {
			return {
				userInfo: [],
				memberMenus: [
					// {
					// 	icon: '/static/imgs/btn-course.png',
					// 	name: '我的课程',
					// 	href: '/pages/mine/member-course'
					// },
					{
						icon: '/static/imgs/btn-book.png',
						name: '我的订场',
						href: '/pages/mine/my-arena'
					},
					// {
					// 	icon: '/static/imgs/btn-order.png',
					// 	name: '我的订单',
					// 	isWeb: true,
					// 	href: getMeixingUrl() + '/#/pages/order/index?dataType=all'
					// },
					// {
					// 	icon: '/static/imgs/btn-receive.png',
					// 	name: '收货地址',
					// 	isWeb: true,
					// 	href: getMeixingUrl() + '/#/pages/address/index'
					// },
					// {
					// 	icon: '/static/imgs/btn-card.png',
					// 	name: '我的会员卡',
					// 	href: '/pages/mine/my-card'
					// }
				],
				coachMenus: [{
						icon: '/static/imgs/btn-course.png',
						name: '我的课程',
						href: '/pages/mine/coach-course'
					},
					{
						icon: '/static/imgs/btn-students.png',
						name: '我的学员',
						href: '/pages/mine/my-student'
					}
				],
				// 是否已登录
				isLogin: false,
				// 是否工作人员
				isCoach: false
			};
		},
		onLoad(options) {
			console.log(getMeixingUrl())
			// 微信公众号登陆成功后统一跳转到该页面，在该页面完成token记录，再跳转到重定向到登陆前页面
			const userId = options.userId
			const token = options.token
			if (userId && token) {
				this.$store.dispatch('oaLoginSuccess', {
					userId,
					token
				}).then(res => {
					// 重定向到登陆前的页面
					const redirect = uni.getStorageSync('login_redirect_url')
					if (redirect) {
						uni.redirectTo({
							url: redirect
						})
						return
					}
					// 重新获取页面数据
					this.getPageData()
				})
			}
		},

		onShow() {
			// 判断是否已登录
			this.isLogin = checkLogin()
			this.getPageData()
		},

		methods: {
			getPageData() {
				this.getUserInfo()
				this.getCoachInfo()
			},

			// 获取当前用户信息
			getUserInfo() {
				const app = this
				return new Promise((resolve, reject) => {
					!app.isLogin ? resolve(null) : UserApi.info()
						.then(result => {
							app.userInfo = result.data.userInfo
							resolve(app.userInfo)
						})
						.catch(err => {
							if (err.result && err.result.status == 401) {
								app.isLogin = false
								resolve(null)
							} else {
								reject(err)
							}
						})
				})
			},

			// 判断当前用户是否为教练或工作人员
			getCoachInfo() {
				UserApi.isCoach().then(res => {
					const {
						isCoach
					} = res.data
					this.isCoach = isCoach
				})
			},

			onLogin() {
				// 判断是否在微信浏览器内，是则获取微信用户授权
				if (isWechat()) {
					this.$store.dispatch('MpWxLogin')
					return
				}

				// 如果不是微信浏览器内，禁止登陆
				if (!isWechat()) {
					uni.showToast({
						title: '请在微信内登陆使用~',
						icon: 'none'
					})
					return
				}

				!this.isLogin && this.$navTo('pages/login/index')

			},
		}
	}
</script>

<style scoped lang="scss">
	@import '@/common/scss/common.scss';

	page {
		background-color: $page-bg-color;
	}

	.page-mine {
		box-sizing: border-box;
		width: 100%;
		padding: 0 16rpx;
		padding-bottom: 150rpx;

		.cmp-user-menu-block {
			.member-menus {
				display: flex;
				flex-wrap: wrap;

				.cmp-menu-btn {
					display: inline-flex;
					flex-basis: 33.33%;

					&:nth-child(n+4) {
						margin-top: 72rpx;
					}
				}
			}
		}
	}
</style>
